onbeforerowdatabind Event

This event is executed just before value of the row is set. It sets the class and tooltip for the row.

Syntax

Inline HTML

<div cordysType="wcp.library.ui.XGrid" id="xgridId ()">
    <div id="columnId" onbeforerowdatabind="handler" ref="columnRef">columnLabel</div>
...
</div>

Event Information

To invoke	Invoked whenever the row is rendered, such as afterbindData(), andrefresh().
Default Action	Initiates any action associated with this event.

Event Object Properties

Although event handlers in the DHTML Object Model do not receive parameters directly, a handler can query an event object for data.

Property	Description
businessObject	XML node of the business object associated with the row.
className	String that refers to the CSS class associated with the cell.
data	XML node that is the basis for the content in the XGrid.
srcElement	Refers to the HTML node of the XGrid that caused the event to be executed.
returnValue	Boolean. When set to false, the event is cancelled.
title	String, to link a tooltip to the cell.
value	Refers to the value or cell content to be displayed in the cell.

Remarks

The HTML of the cells and row is not available when the onbeforerowdatabind event is executed. The className event property allows simple styling changes to the cell. The styling properties supported are:

background-color
color
cursor
direction
text (-align, -autospace, -decoration, -transform)
font (-family, -style, -variant, -weight)
letter-spacing
word-spacing

Example

The following example demonstrates the use of theonbeforerowdatabindevent. Cells with negative values in the profit column are highlighted in red color, right-aligned, and associated with a tooltip.

Also, theonchangeevent is used to change the style of a cell based on its value, such that when you change the value of the cell, its style changes accordingly.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html onapplicationready="fillXGrid()">
      <head>
            <meta content="Web Generator" name="Generator"/>
            <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
            <title>onbeforerowdatabind event</title>
            <script src="/cordys/wcp/application.js"></script>
                  <script type="cordys/xml"id="projectsXML">
                        <data></data>
                  </script>
                  <script type="cordys/xml" id="newNode">
                        <projects>
                        <project></project>
                        <description></description>
                        <profit></profit>
                        </projects>
                  </script>
            <script>
            var XMLNode;
            /*creates sample data to fill XGrid*/
            function fillXGrid()
            {
                  XMLNode = cordys.cloneXMLDocument(projectsXML.XMLDocument);
                  var dataNode = cordys.selectXMLNode(XMLNode,".//*[local-name()='data']");
                  for (var i=1 ; i<21 ; i++ )
                  {
                        var newRow = cordys.cloneXMLDocument(newNode.XMLDocument);
                        cordys.setTextContent(cordys.selectXMLNode(newRow,".//*[local-name()='project']"), i)
                        cordys.setTextContent(cordys.selectXMLNode(newRow,".//*[local-name()='description']"),"Project " + i);
                        //fill profit with random amount between -1000 and 1000
                        cordys.setTextContent( cordys.selectXMLNode(newRow,".//*[local-name()='profit']"), 1000 - Math.ceil(2000*Math.random()));
                        cordys.appendXMLNode(newRow.documentElement,dataNode)
                  }
                  projectGrid.bindData( XMLNode );
            }
            function handleOnbeforerowdatabind()
            {
                  checkProfit( window.application.event );
            }
            function handleChange()
            {
                  checkProfit( window.application.event );
            }
            //value<0 link the negative css class
            function checkProfit(evnt)
            {
                  if ( parseInt(cordys.getTextContent(cordys.selectXMLNode(evnt.businessObject,".//*[local-name()='project']")))<0 )
                  {
                        evnt.className = "negative";
                        evnt.title = "Check project";
                  }   
                  else
                  {
                        evnt.className = "positive";
                  }
            }
            </script>
            <style>
                  .negative .xgridrowcell
                  {
                        text-align:right;
                        color:red;
                  }
                  .positive .xgridrowcell
                  {
                        text-align:right;
                  }
            </style>
      </head>
      <body>
            <div cordysType="wcp.library.ui.XGrid"
                  id="projectGrid"
                  xpathRowData = "data/projects"
                  xpathBusinessObject = "."
                  style="width:500;height:200" onbeforerowdatabind="handleOnbeforerowdatabind()">
                  <div id="projectId" ref="project" width=75>Project</div>
                  <div id="description" ref="description">Description</div>
                  <div id="profit" ref="profit" dataType="integer"
                  onchange="handleChange()">Operating Profit (EUR)</div>
            </div>
      </body>
</html>